<template>
    <van-popup class="modal-white" v-model:show="show" teleport="body" position="bottom" :style="{height:'4.85rem'}" @closed="close" round @open="getList">
        <div class="modal-header">
            <div class="title">{{$t('Withdraw To Bank Card')}} {{type}}</div>
            <div class="close" @click="close"></div>
        </div>
        <div class="modal-container" :style="{paddingBottom:vueState.pageStyle.tabBarHeight + 'px'}">
            <div>
                <yowin-select class="select" v-model:value="field.bankName.model" :placeHolder="$t('BankName')" :options="selectOptions"></yowin-select>
                <yowin-input class="input" v-model:input="field.bankLinkNo.model" v-model:state="field.bankLinkNo.state" :placeholder="$t('IFSC')" :valid="validBankLinkNo" :clear="true" :successInfo="$t(ifscSuccessInfo)" :errorInfo="$t(ifscErrorInfo)"></yowin-input>
                <yowin-input class="input" v-model:input="field.bankCardNo.model" v-model:state="field.bankCardNo.state" :placeholder="$t('BankCardNO')"  :valid="validBankCardNo" :clear="true"></yowin-input>
                <yowin-input class="input" v-model:input="field.PayeeName.model" v-model:state="field.PayeeName.state" :placeholder="$t('PayeeName')" :maxLength="20" :valid="validPayeeName" :clear="true"></yowin-input>
                <yowin-input class="input" v-model:input="field.PayeeEmail.model" v-model:state="field.PayeeEmail.state" :placeholder="$t('PayeeEmail')" :valid="validEmail" :successInfo="$t(emailSuccessInfo)" :errorInfo="$t(emailErrorInfo)" :clear="true"></yowin-input>
                <div class="input-group">
                    <div class="header">+{{vueState.countryInfo.areaCode}}</div>
                    <yowin-input class="input" v-model:input="field.phone.model" v-model:state="field.phone.state" :placeholder="$t('PayeeMobile:bank reservation')" :valid="validPhoneNumber" :successInfo="$t(numberSuccessInfo)" :errorInfo="$t(numberErrorInfo)" :clear="true"></yowin-input>
                </div>
            </div>
            <div :class="['button',{unactive:!status}]" :style="{bottom:buttonBottom}" @click="submit">{{$t('Confirm')}}</div>
        </div>
    </van-popup>
</template>
<script>
import { reactive, toRefs,computed, inject, watch} from 'vue'
import {internationalConfig} from '@@/i18n/config.js'
import { QuickBalanceApi } from '@@/api/quick.js'
import YowinInput from '../Input/index.vue'
import YowinSelect from '../Select/index.vue'

export default {
    components:{
        YowinInput,
        YowinSelect
    },
    props:['show','height','type'],
    setup(props,ctx) {
        const vueState = inject('vueState')
        const fsize = window.fsize
        const tabBarHeight = vueState.pageStyle.tabBarHeight || 0
        const state = reactive({
            buttonBottom:`${0.32*fsize+tabBarHeight}px`,
            numberSuccessInfo:'Success! Number is available!',
            numberErrorInfo:'Error! Number is not available!',
            emailSuccessInfo:'Success! Email is available!',
            emailErrorInfo:'Error! Email is not available!',
            ifscSuccessInfo:'Success! IFSC is available!',      //lsy fixed
            ifscErrorInfo:'Error! IFSC is not available!',      //lsy fixed
            selectOptions:[
                {
                    name:'HDFC BANK',
                    value:'HDFC BANK'
                },
                {
                    name:'ICICI BANK LIMITED',
                    value:'ICICI BANK LIMITED'
                },
                // {
                //     name:'STATE BANK OF INDIA',
                //     value:'STATE BANK OF INDIA'
                // },
                // {
                //     name:'AXIS BANK',
                //     value:'AXIS BANK'
                // },
                {
                    name:'INDUSIND BANK',
                    value:'INDUSIND BANK'
                },
                {
                    name:'KOTAK MAHINDRA BANK LIMITED',
                    value:'KOTAK MAHINDRA BANK LIMITED'
                },
                // {
                //     name:'PUNJAB NATIONAL BANK',
                //     value:'PUNJAB NATIONAL BANK'
                // },
                {
                    name:'BANK OF BARODA',
                    value:'BANK OF BARODA'
                },
                {
                    name:'CANARA BANK',
                    value:'CANARA BANK'
                },
                {
                    name:'BANK OF INDIA',
                    value:'BANK OF INDIA'
                },
                {
                    name:'INDIAN BANK',
                    value:'INDIAN BANK'
                },
                {
                    name:'CENTRAL BANK OF INDIA',
                    value:'CENTRAL BANK OF INDIA'
                },
                {
                    name:'IDBI BANK',
                    value:'IDBI BANK'
                },
                {
                    name:'INDIAN OVERSEAS BANK',
                    value:'INDIAN OVERSEAS BANK'
                },
                // {
                //     name:'PUNJAB NATIONAL BANK',
                //     value:'PUNJAB NATIONAL BANK'
                // },
                // {
                //     name:'UNION BANK OF INDIA',
                //     value:'UNION BANK OF INDIA'
                // },
                // {
                //     name:'YES BANK',
                //     value:'YES BANK'
                // },
                // {
                //     name:'UCO BANK',
                //     value:'UCO BANK'
                // }
            ],

            field:{
                bankName:{
                    model:'',
                    state: false
                },
                bankLinkNo:{
                    model:'',
                    state: false
                },
                bankCardNo:{
                    model:'',
                    state:false
                },
                PayeeName:{
                    model: '',
                    state:false
                },
                PayeeEmail:{
                    model:'',
                    state:false
                },
                phone:{
                    model:vueState.pageInfo.mobile,
                    state:false
                }
            },
        })
        const status = computed(()=>{
            let flag = true
            for(let key in state.field){
                flag = flag && state.field[key].state
            }
            return flag
        })
        const validPhoneNumber = (val)=> {
            const reg = vueState.countryInfo.country === 'BR' ? /^\d{11}$/ : /^\d{10}$/
            return reg.test(val)
        }
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        const submit = ()=> {
            ctx.emit('submit',state.field)
        }
        watch(state.field,(val)=>{
            val.bankName.state = Boolean(val.bankName.model) 
            val.PayeeName.state = Boolean(val.PayeeName.model)
        })
        const validBankLinkNo = (val) => {
            return /^[a-zA-Z]{4}[a-zA-Z0-9]{7}$/.test(val)
        }
        const validPayeeName = (val) => {
            return Boolean(val)
        }
        const validBankCardNo = (val)=> {
            return /^\d*$/g.test(val)
        }
        const validEmail = (val)=> {
            return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(val)
        }
        const getList = () => {
            QuickBalanceApi.BankList().then(res=>{
                let option = []
                if(res){
                    res.some(item=>{
                        option.push({
                            name: item,
                            value: item
                        })
                    })
                }
                state.selectOptions = option
            })
        }
        // getList()
        return {
            ...toRefs(state),
            close,
            submit,
            validBankCardNo,
            vueState,
            status,
            validEmail,
            validPayeeName,
            validBankLinkNo,
            getList,
            validPhoneNumber
        }
    }
}
</script>
<style lang="less" scoped>
.tee{
    height: .2rem;
    width: .3rem;
    background-color: red;
}
.modal{
    &-white{
        padding-bottom: .5rem;
    }
    &-header{
        padding:.16rem .16rem .04rem .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-size: .16rem;
            font-weight: 500;
            color: black;
            line-height: .28rem;
        }
        .close{
            height: .24rem;
            width: .24rem;
            background: url(../../assets/images/Modal/modal_close_green.png) no-repeat center;
            background-size: contain;
        }
    }
    &-container{
        padding: .2rem .24rem 0;
        height: calc(100% - .48rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .input{
            margin-top: .2rem;
            &:first-child{
                margin-top: 0
            }
        }
        .input-group{
            margin-top: .2rem;
            display: flex;
            align-items: flex-start;
            .input{
                margin-top: 0;
            }
            .header{
                margin-right: .08rem;
                height:.44rem;
                width:.68rem;
                background-color:#E0E5F2;
                border-radius: .1rem;
                .fc();
                font-size: .16rem;
                font-weight: bold;
                color:#1B2559;
            }
        }
        .button{
            .unique-button();
            width: 100%;
            margin-bottom:.32rem;
            height: .46rem;
            font-size: .16rem;
            flex-shrink: 0;
            &.unactive{
                opacity: .5;
            }
        }
    }
}
</style>